<template>
  <div>
    <!--ref对象类型-->
    用户：{{ user.name }} -- {{ user.age }} -- {{ user.address.city }} <br />
    <button @click="changeUser">切换用户</button>
    <br />
    <button @click="changeUserName">切换用户姓名</button>
    <br />
    <button @click="changeUserCity">切换用户city</button>
    <br />
    <button @click="changeUserAddress">切换用户地址</button>
    <br />
    <br />
  </div>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue'

const user = ref({
  name: '张三',
  age: 18,
  address: {
    city: '北京',
  },
})

const changeUser = () => {
  user.value = {
    name: '李四',
    age: 20,
    address: {
      city: '上海',
    },
  }
}
const changeUserName = () => {
  user.value.name += '~'
}
const changeUserCity = () => {
  user.value.address.city += '~'
}
const changeUserAddress = () => {
  user.value.address = {
    city: '上海 啊',
  }
}
// 监视ref- 整个对象：监视的是对象的地址（属性改变不会触发的）；
const stopWatch = watch(user, (newVal, oldVal) => {
  console.log('watch-ref对象类型1 - 非deep：', newVal, oldVal)
})

// 监视ref-整个对象：监视的时候对象的地址（加上deep后属性改变会触发watch）；
const stopWatch2 = watch(
  user,
  (newVal, oldVal) => {
    console.log('watch-ref对象类型 2 - 非deep：', newVal, oldVal)

    // 改变属性后:就是同一个内容。eg：装修房子后，新房子就是旧房子。
    console.log('watch-ref对象类型 2 - 是否相等：', newVal === oldVal)
  },
  { deep: true },
)
</script>
<style scoped></style>
